<template>
  <div id="capital">
    <img style="width:100%" src="../assets/img/six/titleimg.png" alt="">
    <div class="mt24 fc tablebox">
      <router-link class="fcd left" to="/assets">
        <i style="font-size: .32rem" class="iconfont icon-ic_developer BL"></i>
        <div class="text">资产</div>
      </router-link>

      <div class="right">
        <div class="fb th">
          <span>资产名称</span>
          <span>资产类别</span>
          <span>资产地点(经合社)</span>
        </div>
        <div style="overflow: hidden;height: .9rem">
          <div style="transition: top 1s;position:relative" :style="{ top }">
            <div style="" :style="{'background': index%2==1?'':''}" v-for="(item,index) in dataList" :key="index"
              class="fb">
              <span>{{item.name}}</span>
              <span>{{item.type}}</span>
              <span style="">{{item.address}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mt24 fc tablebox">
      <router-link class="fcd left" to="/resources">
        <i style="font-size: .32rem" class="iconfont icon-gongsi BL"></i>
        <div class="text">资源</div>
      </router-link>
      <div class="right">
        <div class="fb th">
          <span>资源名称</span>
          <span>资源类别</span>
          <span>资源地点(经合社)</span>
        </div>
        <div style="overflow: hidden;height: .9rem">
          <div style="transition: top 1s;position:relative" :style="{ top }">
            <div style="" :style="{'background': index%2==1?'':''}" v-for="(item,index) in dataList2" :key="index"
              class="fb">
              <span>{{item.name}}</span>
              <span>{{item.type}}</span>
              <span style="">{{item.address}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mt24 fc tablebox">
      <router-link class="fcd left" to="/capitalanalysis">
        <i style="font-size: .32rem" class="iconfont icon-qian BL"></i>
        <div class="text">资金</div>
      </router-link>
      <div class="right">
        <div class="fb th">
          <span>资金收入</span>
          <span>资金支出</span>
          <span>资金地点(经合社)</span>
        </div>
        <div style="overflow: hidden;height: .9rem">
          <div style="transition: top 1s;position:relative" :style="{ top }">
            <div style="" :style="{'background': index%2==1?'':''}" v-for="(item,index) in dataList3" :key="index"
              class="fb">
              <span>{{item.name}}</span>
              <span>{{item.type}}</span>
              <span style="">{{item.address}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { post, get } from "@/utils/axios";

export default {
  name: "capital",
  components: {},
  data() {
    return {
      timer: null,
      activeIndex: 0,
      dataList: [
        {
          name: "新增企业数1",
          type: "房屋及建筑物",
          address: "沈家桥村经合社"
        },
        {
          name: "新增企业数2",
          type: "房屋及建筑物",
          address: "沈家桥村经合社"
        },
        {
          name: "新增企业数3",
          type: "房屋及建筑物",
          address: "沈家桥村经合社"
        },
        {
          name: "新增企业数4",
          type: "房屋及建筑物",
          address: "沈家桥村经合社"
        },
        {
          name: "新增企业数5",
          type: "房屋及建筑物",
          address: "沈家桥村经合社"
        },
        {
          name: "新增企业数",
          type: "房屋及建筑物",
          address: "沈家桥村经合社"
        },
        {
          name: "新增企业数",
          type: "房屋及建筑物",
          address: "沈家桥村经合社"
        }
      ],
      dataList2: [
        {
          name: "杭州励楷家具",
          type: "厂房一",
          address: "沈家桥村经合社"
        },
        {
          name: "杭州励楷家具",
          type: "厂房一",
          address: "沈家桥村经合社"
        },
        {
          name: "杭州励楷家具",
          type: "厂房一",
          address: "沈家桥村经合社"
        },
        {
          name: "杭州励楷家具",
          type: "厂房一",
          address: "沈家桥村经合社"
        },
        {
          name: "杭州励楷家具",
          type: "厂房一",
          address: "沈家桥村经合社"
        },
        {
          name: "杭州励楷家具",
          type: "厂房一",
          address: "沈家桥村经合社"
        },
        {
          name: "杭州励楷家具",
          type: "厂房一",
          address: "沈家桥村经合社"
        }
      ],
      dataList3: [
        {
          name: "100000元 ",
          type: "50000元 ",
          address: "沈家桥村经合社"
        },
        {
          name: "100000元 ",
          type: "50000元 ",
          address: "沈家桥村经合社"
        },
        {
          name: "100000元 ",
          type: "50000元 ",
          address: "沈家桥村经合社"
        },
        {
          name: "100000元 ",
          type: "50000元 ",
          address: "沈家桥村经合社"
        },
        {
          name: "100000元 ",
          type: "50000元 ",
          address: "沈家桥村经合社"
        },
        {
          name: "100000元 ",
          type: "50000元 ",
          address: "沈家桥村经合社"
        },
        {
          name: "100000元 ",
          type: "50000元 ",
          address: "沈家桥村经合社"
        }
      ]
    };
  },
  computed: {
    top() {
      return -this.activeIndex * 0.3 + "rem";
    }
  },
  created() {},
  mounted() {
    this.timer = setInterval(_ => {
      if (this.activeIndex < this.dataList.length - 3) {
        this.activeIndex += 1;
      } else {
        this.activeIndex = 0;
      }
    }, 3000);
  },
  destroyed() {
    this.timer = null;
  },

  methods: {
    // getdaycapital(day) {
    //   //每天实时人口
    //   let timestamp = Date.parse(new Date(day)) / 1000;
    //   let signValue = md5("330112NK07piZ0x9WcLpKW" + timestamp);
    //   post("/v1/data/10000017491", {
    //     area_code: "330112",
    //     sign: signValue,
    //     timestamp: timestamp
    //   }).then(res => {
    //     this.peopleArray = res.data;
    //     var count = 0;
    //     this.peopleArray.forEach(item => {
    //       count += Number(item.num);
    //     });
    //     this.peopleDay.push(String(count));
    //   });
    // }
  }
};
</script>

<style lang="scss" scoped>
#capital {
  width: 100%;
  // border: 1px solid aqua;
  .tablebox {
    padding-left: 0.5rem;
    // height: 1.1rem;
    align-items: flex-start;
    position: relative;
    &:after {
      content: "";
      width: 1.44rem;
      height: 1.3rem;
      background-color: #0c2745;
      border-radius: 0.08rem;
      position: absolute;
      right: -0.1rem;
      top: -0.06rem;
      z-index: 0;
    }

    .left {
      margin-right: 0.1rem;
      width: 0.96rem;
      height: 1.2rem;
      background: url(../assets/img/six/img01.png) center no-repeat;
      background-size: 100% 100%;
    }
    .right {
      width: 3.7rem;
      position: relative;
      z-index: 1;
      // &:nth-of-type(3) {
      //   width: 4rem;
      // }
      // .th {
      //   line-height: 14px;
      //   background-color: #0d2d50;
      //   color: #9ff4f6;
      // }
      // .fb {
      //   margin-top: 6px;
      // }
      .fb span {
        display: inline-block;
        height: 0.3rem;
        line-height: 0.3rem;
        font-size: 0.12rem;
        width: 33%;
        &:nth-of-type(3) {
          width: 34%;
        }
      }
    }
  }
}
</style>
